<template>
  <div class="layout">
    <!-- 左侧导航 -->
    <MyMenu class="menu" :isCollapse="isCollapse"></MyMenu>
    <!-- 右侧内容 -->
    <Content class="content" :class="{isActive:isCollapse}" @changeCollapse="changeCollapse" :isCollapse="isCollapse" ></Content>
  </div>
</template>

<script>
import MyMenu from '@/components/Mymenu.vue'
import Content from '@/components/Content.vue'
export default {
  name:"LayOut",
  components:{
    MyMenu,
    Content
  },
  data(){
    return{
      isCollapse:false
    }
  },
  methods:{
    changeCollapse(){

      this.isCollapse = !this.isCollapse;
    }
  },
  

}
</script>

<style lang="less" scoped>
.layout{
  
  .menu{

    min-height:500px;
    background-color: #545c64;
    position: fixed;
    top:0;
    bottom:0
  }
  .content{
    margin-left: 300px;
  }
  .isActive{
    margin-left: 64px;
  }
}

</style>